<script>
import debounce from 'lodash/debounce';
import { typeOf } from '@shell/utils/sort';
import { removeAt, removeObject } from '@shell/utils/array';
import { base64Encode, base64Decode, binarySize } from '@shell/utils/crypto';
import { downloadFile } from '@shell/utils/download';
import { TextAreaAutoGrow } from '@components/Form/TextArea';
import { get } from '@shell/utils/object';
import Select from '@shell/components/form/Select';
import FileSelector from '@shell/components/form/FileSelector';
import { _EDIT, _VIEW } from '@shell/config/query-params';
import { asciiLike } from '@shell/utils/string';
import CodeMirror from '@shell/components/CodeMirror';
import isEqual from 'lodash/isEqual';
import { LabeledTooltip } from '@components/LabeledTooltip';

export default {
  name: 'KeyValue',

  emits: ['focusKey', 'update:value'],

  components: {
    CodeMirror,
    Select,
    TextAreaAutoGrow,
    FileSelector,
    LabeledTooltip
  },
  props: {
    value: {
      type:    [Array, Object],
      default: null,
    },
    defaultValue: {
      type:    [Array, Object],
      default: null,
    },
    // If the user supplies this array, then it indicates which keys should be shown as binary
    binaryValueKeys: {
      type:    [Array, Object],
      default: null
    },
    mode: {
      type:    String,
      default: _EDIT,
    },
    asMap: {
      type:    Boolean,
      default: true,
    },
    initialEmptyRow: {
      type:    Boolean,
      default: false,
    },
    title: {
      type:    String,
      default: ''
    },

    titleProtip: {
      type:    String,
      default: ''
    },

    protip: {
      type:    [String, Boolean],
      default: '',
    },

    protipValue: {
      type:    [String, Boolean],
      default: '',
    },

    // For asMap=false, the name of the field that goes into the row objects
    keyName: {
      type:    String,
      default: 'key',
    },
    keyLabel: {
      type:    String,
      default: '',
    },
    keyEditable: {
      type:    Boolean,
      default: true,
    },
    // Offer a set of suggestions for the keys as a Select instead of Input
    keyOptions: {
      type:    Array,
      default: null,
    },
    // If false and keyOptions are provided, the key MUST be one of the keyOptions.
    keyTaggable: {
      type:    Boolean,
      default: true,
    },
    keyOptionUnique: {
      type:    Boolean,
      default: false,
    },
    keyPlaceholder: {
      type:    String,
      default: '',
    },
    separatorLabel: {
      type:    String,
      default: '',
    },
    // For asMap=false, the name of the field that goes into the row objects
    valueName: {
      type:    String,
      default: 'value',
    },
    valueLabel: {
      type:    String,
      default: '',
    },
    valuePlaceholder: {
      type:    String,
      default: '',
    },
    valueCanBeEmpty: {
      type:    Boolean,
      default: false,
    },
    displayValuesAsBinary: {
      type:    Boolean,
      default: false,
    },
    valueMarkdownMultiline: {
      type:    Boolean,
      default: false,
    },
    valueMultiline: {
      type:    Boolean,
      default: true,
    },
    valueTrim: {
      type:    Boolean,
      default: true,
    },
    handleBase64: {
      type:    Boolean,
      default: false,
    },
    valueConcealed: {
      type:    Boolean,
      default: false,
    },
    // On initial reading of the existing value, this function is called
    // and can return false to say that a value is not supported for editing.
    // This is mainly useful for resources like envVars that have a valueFrom
    // you want to preserve but not support editing
    supported: {
      type:    Function,
      default: (v) => true,
    },
    // For asMap=false, preserve (copy) these keys from the original value into the emitted value.
    // Also useful for valueFrom as above.
    preserveKeys: {
      type:    Array,
      default: null,
    },
    extraColumns: {
      type:    Array,
      default: () => [],
    },
    defaultAddData: {
      type:    Object,
      default: () => {},
    },
    addLabel: {
      type:    String,
      default: '',
    },
    addIcon: {
      type:    String,
      default: '',
    },
    addClass: {
      type:    String,
      default: '',
    },
    addAllowed: {
      type:    Boolean,
      default: true,
    },
    readIcon: {
      type:    String,
      default: 'icon-upload',
    },
    readAllowed: {
      type:    Boolean,
      default: true,
    },
    readAccept: {
      type:    String,
      default: '*',
    },
    readMultiple: {
      type:    Boolean,
      default: false,
    },
    removeLabel: {
      type:    String,
      default: '',
    },
    removeIcon: {
      type:    String,
      default: '',
    },
    removeAllowed: {
      type:    Boolean,
      default: true,
    },
    fileModifier: {
      type:    Function,
      default: (name, value) => ({ name, value })
    },
    parserSeparators: {
      type:    Array,
      default: () => [':', '='],
    },
    loading: {
      default: false,
      type:    Boolean
    },
    parseLinesFromFile: {
      default: false,
      type:    Boolean
    },
    parseValueFromFile: {
      default: false,
      type:    Boolean
    },
    disabled: {
      default: false,
      type:    Boolean
    },
    keyErrors: {
      type:    Object,
      default: () => ({})
    }
  },
  data() {
    const rows = this.getRows(this.value);

    return {
      rows,
      codeMirrorFocus: {},
      lastUpdated:     null
    };
  },
  computed: {
    _protip() {
      if (this.protip === false) {
        return null;
      }

      return this.protip || this.t('keyValue.protip', null, true);
    },
    _keyLabel() {
      return this.keyLabel || this.t('generic.key');
    },
    _keyPlaceholder() {
      return this.keyPlaceholder || this.t('keyValue.keyPlaceholder');
    },
    _valueLabel() {
      return this.valueLabel || this.t('generic.value');
    },
    _valuePlaceholder() {
      return this.valuePlaceholder || this.t('keyValue.valuePlaceholder');
    },
    _addLabel() {
      return this.addLabel || this.t('generic.add');
    },

    isView() {
      return this.mode === _VIEW;
    },
    containerStyle() {
      const gap = this.canRemove ? ' 50px' : '';
      const size = 2 + this.extraColumns.length;

      return `grid-template-columns: repeat(${ size }, 1fr)${ gap };`;
    },
    usedKeyOptions() {
      return this.rows.map((row) => row[this.keyName]);
    },
    filteredKeyOptions() {
      if (this.keyOptionUnique) {
        return this.keyOptions
          .filter((option) => !this.usedKeyOptions.includes(option.value));
      }

      return this.keyOptions;
    },
    /**
     * Prevent removal if expressly not allowed and not in view mode
     */
    canRemove() {
      return !this.isView && this.removeAllowed;
    }
  },
  created() {
    this.queueUpdate = debounce(this.update, 500);
  },
  watch: {
    /**
     * KV works with v-model:value=value
     * value is transformed into this.rows (base64 decode, mark supported etc)
     * on input, this.update constructs a new value from this.rows and emits
     * if the parent component changes value, KV needs to re-compute this.rows
     * If the value changes because the user has edited it using KV, then KV should NOT re-compute rows
     * the value watcher will compare the last value KV emitted with the new value KV detects and re-compute rows if they don't match
     */
    value: {
      deep: true,
      handler(neu, old) {
        this.valuePropChanged(neu, old);
      }
    }
  },
  methods: {
    valuePropChanged(neu) {
      if (!isEqual(neu, this.lastUpdated)) {
        this.rows = this.getRows(neu);
      }
    },

    getRows(value) {
      const rows = [];

      if ( this.asMap ) {
        const input = value || {};

        Object.keys(input).forEach((key) => {
          let value = input[key];
          const decodedValue = base64Decode(input[key]);
          const asciiValue = asciiLike(decodedValue);

          if ( this.handleBase64 && asciiValue) {
            value = base64Decode(value);
          }

          rows.push({
            key,
            value,
            binary:    this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
            canEncode: this.handleBase64 && asciiValue,
            supported: true,
          });
        });
      } else {
        const input = value || [];

        for ( const row of input ) {
          let value = row[this.valueName] || '';

          const decodedValue = base64Decode(row[this.valueName]);
          const asciiValue = asciiLike(decodedValue);

          if ( this.handleBase64 && asciiValue) {
            value = base64Decode(value);
          }
          const entry = {
            [this.keyName]:   row[this.keyName] || '',
            [this.valueName]: value,
            binary:           this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
            canEncode:        this.handleBase64 && asciiValue,
            supported:        this.supported(row),
          };

          this.preserveKeys?.map((k) => {
            if ( typeof row[k] !== 'undefined' ) {
              entry[k] = row[k];
            }
          });
          rows.push(entry);
        }
      }
      if ( rows && !rows.length && this.initialEmptyRow ) {
        rows.push({
          [this.keyName]:   '',
          [this.valueName]: '',
          binary:           false,
          canEncode:        this.handleBase64,
          supported:        true
        });
      }

      return rows;
    },

    add(key = '', value = '') {
      const obj = {
        ...this.defaultAddData,
        [this.keyName]:   key,
        [this.valueName]: value,
      };

      obj.binary = false;
      obj.canEncode = this.handleBase64;
      obj.supported = true;
      this.rows.push(obj);
      this.queueUpdate();
      this.$nextTick(() => {
        if (this.$refs.key) {
          const keys = this.$refs.key;

          const lastKey = keys[keys.length - 1];

          lastKey.focus();
        } else {
          this.$emit('focusKey');
        }
      });
    },
    remove(idx) {
      removeAt(this.rows, idx);
      this.queueUpdate();
    },
    removeEmptyRows() {
      const cleaned = this.rows.filter((row) => {
        return (row.value.length || row.key.length);
      });

      this['rows'] = cleaned;
    },
    onFileSelected(file) {
      const { name, value } = this.fileModifier(file.name, file.value);

      if (!this.parseLinesFromFile) {
        this.add(name, value, this.displayValuesAsBinary);
      } else {
        const lines = value.split('\n');

        lines.forEach((line) => {
          // Ignore empty lines
          if (line.length) {
            const [key, value] = line.split('=');

            this.add(key, value);
          }
        });

        if (lines.length > 0) {
          this.removeEmptyRows();
        }
      }
    },
    download(idx, ev) {
      const row = this.rows[idx];
      const name = row[this.keyName];
      const value = row[this.valueName];

      downloadFile(name, value, 'application/octet-stream');
    },
    update() {
      let out;

      if ( this.asMap ) {
        out = {};
        const keyName = this.keyName;
        const valueName = this.valueName;

        for ( const row of this.rows ) {
          let value = (row[valueName] || '');
          const key = (row[keyName] || '').trim();

          if (value && typeOf(value) === 'object') {
            out[key] = JSON.parse(JSON.stringify(value));
          } else {
            value = value || '';
            if (this.valueTrim && asciiLike(value)) {
              value = value.trim();
            }
            if (row.canEncode) {
              value = base64Encode(value);
            }
            if ( key && (value || this.valueCanBeEmpty) ) {
              out[key] = value;
            }
          }
        }
      } else {
        const preserveKeys = this.preserveKeys || [];

        removeObject(preserveKeys, this.keyName);
        removeObject(preserveKeys, this.valueName);
        out = this.rows.map((row) => {
          let value = row[this.valueName];

          if (row.canEncode) {
            value = base64Encode(value);
          }
          const entry = {
            [this.keyName]:   row[this.keyName],
            [this.valueName]: value,
          };

          for ( const k of preserveKeys ) {
            if ( typeof row[k] !== 'undefined' ) {
              entry[k] = row[k];
            }
          }

          return entry;
        });
      }
      this.lastUpdated = out;

      this.$emit('update:value', out);
    },
    onPaste(index, event) {
      const text = event.clipboardData.getData('text/plain');
      const lines = text.split('\n');
      const splits = lines.map((line) => {
        const separatorIndex = line.search(new RegExp(this.parserSeparators.join('|')));

        if (separatorIndex === -1) {
          return [];
        }
        const key = line.substring(0, separatorIndex).trim();
        const value = line.substring(separatorIndex + 1).trim();

        return [key, value];
      }).filter((split) => split.length > 0);

      if (splits.length === 0 || (splits.length === 1 && splits[0].length < 2)) {
        return;
      }
      event.preventDefault();
      const keyValues = splits.map((split) => ({
        [this.keyName]:   (split[0] || '').trim(),
        [this.valueName]: (split[1] || '').trim(),
        supported:        true,
        canEncode:        this.handleBase64,
        binary:           this.displayValuesAsBinary
      }));

      this.rows.splice(index, 1, ...keyValues);
      this.queueUpdate();
    },
    calculateOptions(value) {
      const valueOption = this.keyOptions.find((o) => o.value === value);

      if (valueOption) {
        return [valueOption, ...this.filteredKeyOptions];
      }

      return this.filteredKeyOptions;
    },
    binaryTextSize(val) {
      const handledValue = this.handleBase64 ? base64Decode(val) : val;
      const n = val.length ? binarySize(handledValue) : 0;

      return this.t('detailText.binary', { n }, true);
    },
    get,
    /**
     * Update 'rows' variable with the user's input and prevents to update queue before the row model is updated
     */
    onInputMarkdownMultiline(idx, value) {
      this.rows = this.rows.map((row, i) => i === idx ? { ...row, value } : row);
      this.queueUpdate();
    },
    /**
     * Set focus on CodeMirror fields
     */
    onFocusMarkdownMultiline(idx, value) {
      this.codeMirrorFocus[idx] = value;
    },
    onValueFileSelected(idx, file) {
      const { name, value } = file;

      if (!this.rows[idx][this.keyName]) {
        this.rows[idx][this.keyName] = name;
      }
      this.rows[idx][this.valueName] = value;
    },
    isValueFieldEmpty(value) {
      return !value || value.trim().length === 0;
    }
  }
};
</script>
<template>
  <div class="key-value">
    <div
      v-if="title || $slots.title"
      class="clearfix"
    >
      <slot name="title">
        <h3>
          {{ title }}
          <i
            v-if="titleProtip"
            v-clean-tooltip="titleProtip"
            class="icon icon-info"
          />
        </h3>
      </slot>
    </div>
    <div
      class="kv-container"
      role="grid"
      :aria-label="title || t('generic.ariaLabel.keyValue')"
      :aria-rowcount="rows.length"
      :aria-colcount="extraColumns.length + 2"
      :style="containerStyle"
    >
      <template v-if="rows.length || isView">
        <div class="rowgroup">
          <div class="row">
            <div
              class="text-label key-value-label"
              role="columnheader"
            >
              {{ _keyLabel }}
              <i
                v-if="_protip && !isView && addAllowed"
                v-clean-tooltip="{content: _protip, triggers: ['hover', 'touch', 'focus'] }"
                v-stripped-aria-label="_protip"
                class="icon icon-info"
                tabindex="0"
                role="tooltip"
              />
            </div>
            <div
              class="text-label key-value-label"
              role="columnheader"
            >
              {{ _valueLabel }}
              <i
                v-if="protipValue && !isView && addAllowed"
                v-clean-tooltip="{content: protipValue, triggers: ['hover', 'touch', 'focus'] }"
                v-stripped-aria-label="protipValue"
                class="icon icon-info"
                tabindex="0"
                role="tooltip"
              />
            </div>
            <div
              v-for="(c, i) in extraColumns"
              :key="i"
              role="columnheader"
            >
              <slot :name="'label:'+c">
                {{ c }}
              </slot>
            </div>
            <slot
              v-if="canRemove"
              name="remove"
            >
              <span />
            </slot>
          </div>
        </div>
      </template>
      <template v-if="!rows.length && isView">
        <div class="rowgroup">
          <div class="row">
            <div
              class="kv-item key text-muted"
              role="gridcell"
            >
              &mdash;
            </div>
            <div
              class="kv-item key text-muted"
              role="gridcell"
            >
              &mdash;
            </div>
          </div>
        </div>
      </template>
      <template
        v-for="(row,i) in rows"
        v-else
        :key="i"
      >
        <div class="rowgroup">
          <div class="row">
            <!-- Key -->
            <div
              class="kv-item key"
              role="gridcell"
              :aria-rowindex="i+1"
              :aria-colindex="1"
              :class="{
                'labeled-input-key': keyErrors[row.key],
                'v-popper--has-tooltip': keyErrors[row.key],
              }"
            >
              <slot
                name="key"
                :row="row"
                :mode="mode"
                :keyName="keyName"
                :valueName="valueName"
                :queueUpdate="queueUpdate"
                :disabled="disabled"
              >
                <Select
                  v-if="keyOptions"
                  ref="key"
                  v-model:value="row[keyName]"
                  :searchable="true"
                  :disabled="disabled"
                  :clearable="false"
                  :taggable="keyTaggable"
                  :options="calculateOptions(row[keyName])"
                  :data-testid="`select-kv-item-key-${i}`"
                  :aria-label="t('generic.ariaLabel.key', {index: i+1})"
                  @update:value="queueUpdate"
                />
                <input
                  v-else
                  ref="key"
                  v-model="row[keyName]"
                  :disabled="isView || disabled || !keyEditable"
                  :placeholder="_keyPlaceholder"
                  :data-testid="`input-kv-item-key-${i}`"
                  :aria-label="t('generic.ariaLabel.key', {index: i+1})"
                  @input="queueUpdate"
                  @paste="onPaste(i, $event)"
                >
                <LabeledTooltip
                  v-if="keyErrors[row.key]"
                  :value="keyErrors[row.key]"
                  :hover="true"
                />
              </slot>
            </div>

            <!-- Value -->
            <div
              :data-testid="`kv-item-value-${i}`"
              class="kv-item value"
              role="gridcell"
              :aria-rowindex="i+1"
              :aria-colindex="2"
            >
              <slot
                name="value"
                :row="row"
                :mode="mode"
                :keyName="keyName"
                :valueName="valueName"
                :queueUpdate="queueUpdate"
              >
                <div v-if="!row.supported">
                  {{ t('detailText.unsupported', null, true) }}
                </div>
                <div v-else-if="row.binary">
                  {{ binaryTextSize(row.value) }}
                </div>
                <div
                  v-else
                  class="value-container"
                  :class="{ 'upload-button': parseValueFromFile }"
                >
                  <CodeMirror
                    v-if="valueMarkdownMultiline"
                    ref="cm"
                    data-testid="code-mirror-multiline-field"
                    :class="{['focus']: codeMirrorFocus[i]}"
                    :value="row[valueName]"
                    :as-text-area="true"
                    :mode="mode"
                    :options="{
                      screenReaderLabel: t('generic.ariaLabel.value', { index: i })
                    }"
                    @onInput="onInputMarkdownMultiline(i, $event)"
                    @onFocus="onFocusMarkdownMultiline(i, $event)"
                  />
                  <TextAreaAutoGrow
                    v-else-if="valueMultiline && row[valueName] !== undefined"
                    v-model:value="row[valueName]"
                    data-testid="value-multiline"
                    :class="{'conceal': valueConcealed}"
                    :disabled="disabled"
                    :mode="mode"
                    :placeholder="_valuePlaceholder"
                    :min-height="40"
                    :spellcheck="false"
                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                    @update:value="queueUpdate"
                  />
                  <input
                    v-else
                    v-model="row[valueName]"
                    :disabled="isView || disabled"
                    :type="valueConcealed ? 'password' : 'text'"
                    :placeholder="_valuePlaceholder"
                    autocorrect="off"
                    autocapitalize="off"
                    spellcheck="false"
                    :data-testid="`input-kv-item-value-${i}`"
                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                    @input="queueUpdate"
                  >
                  <FileSelector
                    v-if="parseValueFromFile && readAllowed && !isView && isValueFieldEmpty(row[valueName])"
                    class="btn btn-sm role-secondary file-selector"
                    :label="t('generic.upload')"
                    :include-file-name="true"
                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                    @selected="onValueFileSelected(i, $event)"
                  />
                </div>
              </slot>
            </div>
            <div
              v-for="(c, j) in extraColumns"
              :key="`${i}-${j}`"
              class="kv-item extra"
              role="gridcell"
              :aria-rowindex="i+1"
              :aria-colindex="j+3"
            >
              <slot
                :name="'col:' + c"
                :row="row"
                :queue-update="queueUpdate"
                :i="i"
              />
            </div>
            <div
              v-if="canRemove"
              :key="i"
              class="kv-item remove"
              role="gridcell"
              :aria-rowindex="i+1"
              :aria-colindex="extraColumns.length+3"
              :data-testid="`remove-column-${i}`"
            >
              <slot
                name="removeButton"
                :remove="remove"
                :row="row"
                :i="i"
              >
                <button
                  type="button"
                  role="button"
                  :disabled="isView || disabled"
                  :aria-label="t('generic.ariaLabel.remove', {index: i+1})"
                  class="btn role-link"
                  @click="remove(i)"
                >
                  {{ removeLabel || t('generic.remove') }}
                  <i
                    v-if="removeIcon"
                    :class="[removeIcon]"
                  />
                </button>
              </slot>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div
      v-if="(addAllowed || readAllowed) && !isView"
      class="footer mt-10"
    >
      <slot
        name="add"
        :add="add"
      >
        <button
          v-if="addAllowed"
          type="button"
          role="button"
          class="btn role-tertiary add"
          :class="[addClass]"
          data-testid="add_row_item_button"
          :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
          :aria-label="t('generic.ariaLabel.addKeyValue')"
          @click="add()"
        >
          <i
            class="mr-5 icon"
            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
          /> {{ _addLabel }}
        </button>
        <FileSelector
          v-if="readAllowed"
          :aria-label="t('generic.ariaLabel.readKeyValue')"
          :disabled="isView"
          class="role-tertiary"
          :label="t('generic.readFromFile')"
          :include-file-name="true"
          data-testid="read_all_key_value_button"
          @selected="onFileSelected"
        />
      </slot>
    </div>
  </div>
</template>

<style lang="scss">
.key-value {
  width: 100%;
  .file-selector.role-link {
    text-transform: initial;
    padding: 0;
  }
  .kv-container {
    display: grid;
    align-items: center;
    column-gap: 20px;

    .key-value-label {
      margin-bottom: 0;
    }
    & .kv-item {
      width: 100%;
      margin: 10px 0px 10px 0px;
      &.key, &.extra {
        align-self: flex-start;
      }
      &.value .value-container {
        &.upload-button {
          position: relative;
          display: flex;
          justify-content: right;
          align-items: center;
        }
        .file-selector {
          position: absolute;
          margin-right: 5px;
        }
      }
      &.value textarea {
        padding: 10px 10px 10px 10px;
      }

      .text-monospace:not(.conceal) {
        font-family: monospace, monospace;
      }
    }
  }

  .rowgroup {
    display: grid;
    grid-column-start: 1;
    grid-column-end: span end;
    grid-template-columns: subgrid;
  }

  .row {
    &::before {
      display: none;
    }
    display: grid;
    grid-column-start: 1;
    grid-column-end: span end;
    grid-template-columns: subgrid;
  }

  .remove {
    text-align: center;
    BUTTON {
      padding: 0px;
    }
  }
  .title {
    margin-bottom: 10px;
    .read-from-file {
      float: right;
    }
  }
  input {
    height: 40px;
    line-height: 1;
  }
  .footer {
    .protip {
      float: right;
      padding: 5px 0;
    }
  }
  .download {
    text-align: right;
  }
  .copy-value {
    padding: 0px 0px 0px 10px;
  }
}

.labeled-input-key {
  position: relative;
  display: flex;
  border-collapse: separate;
  z-index: 0; // Prevent label from cover other elements outside of the input
}
</style>
